<template>
  <view class="content">
    <u-navbar
      placeholder
      title="订单详情"
      autoBack
      :autoBack="true"
      bgColor="#111630"
      leftIconColor="#FFF"
      :titleStyle="{ color: '#fff' }"
    >
    </u-navbar>
	<view class="header" v-if="detail.status == -1">
	  <view>已取消</view>
	</view>
    <view class="header" v-if="detail.status == 0">
      <view>待付款</view>
	  <u-count-down
	          :time="detail.endtime* 1000"
	          format="mm:ss"
	          autoStart
	          millisecond
	          @change="onChange"
			  @finish="cannel_order"
	      >
	          <view class="time" style="font-size: 12rpx;">
				  剩余付款时间：
	              <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
	              <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
	          </view>
	      </u-count-down>
    </view>
	<view class="header" v-if="detail.status == 1">
      <view>待发货</view>
    </view>
	<view class="header" v-if="detail.status == 2">
	  <view>待收货</view>
	</view>
	<view class="header" v-if="detail.status == 3">
	  <view>已完成</view>
	</view>
	<view class="header" v-if="detail.status == 5">
	  <view>售后处理中</view>
	</view>
	<view class="header" v-if="detail.status == 6">
	  <view>售后完成</view>
	</view>
    <view class="body">
      <!-- 地址 -->
	  <view v-if="detail.status !=  0">
		  <view class="address">
			<view class="man">
			  <div class="mans">
				<img src="@/static/images/person/address.jpg" />
				<view class="name">{{ detail.address_name }}</view>
			  </div>
		  
			  <view class="phone">{{ detail.address_mobile }}</view>
			</view>
			<view class="location">{{ detail.address_detail }}</view>
		  </view>
	  </view>
	  <view v-else>
		  <view @click="go('/pages/person/addressList?order_id='+order_id)" v-if="address_id || detail.address_id" class="address">
		    <view class="man">
		      <div class="mans">
		        <img src="@/static/images/person/address.jpg" />
		        <view class="name">{{ detail.address_name }}</view>
		      </div>
		  
		      <view class="phone">{{ detail.address_mobile }}</view>
		    </view>
		    <view class="location">{{ detail.address_detail }}</view>
		  </view>
		  <view @click="go('/pages/person/addressList?order_id='+order_id)" v-else class="address">
		    <view class="man">
		      <div class="mans">
		        <img src="@/static/images/person/address.jpg" />
		        <view class="name">请选择地址</view>
		      </div>
		    </view>
		  </view>
	  </view>
      
      <view class="box" v-for="(item,index) in detail.product">
        <img :src="item.product_image" />
        <view class="box-right">
          <text class="title ellipsis_3">{{item.product_title}}</text>

          <view class="gg"
            >规格：{{item.sku_name}}
            <text>x{{item.product_num}}</text>
          </view>
          <view>¥{{item.sku_price}}</view>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="order-info">
        <view class="tit">订单信息</view>
        <view class="order-item">
          <text>订单号：</text>
          {{ detail.order_sn }}
        </view>
        <view class="order-item">
          <text>下单时间：</text>
          {{ detail.create_time }}
        </view>
		<view class="order-item" v-if="detail.status > 0">
		  <text>支付时间：</text>
		  {{ detail.pay_time }}
		</view>
		<view class="order-item" v-if="detail.status > 1">
		  <text>快递公司：</text>
		  {{ detail.delivery_company }}
		</view>
		<view class="order-item" v-if="detail.status > 1">
		  <text>快递单号：</text>
		  {{ detail.delivery_number }}
		</view>
		<view class="order-item" v-if="detail.status > 1">
		  <text>发货时间：</text>
		  {{ detail.delivery_time }}
		</view>
		<view class="order-item" v-if="detail.status > 2">
		  <text>完成时间：</text>
		  {{ detail.finish_time }}
		</view>
        <!-- <view class="order-item">
          <text>运费：</text>
          ¥100.00
        </view> -->
        <view class="order-item">
          <text>实付款：</text>
          ¥{{detail.total_price}}
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="footer" v-if="detail.status == 0">
      <button class="play" @click="payorder">立即支付</button>
      <button class="qx"   @click="cannel_order">取消订单</button>
    </view>
	<view class="footer" v-if="detail.status == 1">
	  <!-- <button class="play" @click="payorder">立即支付</button>
	  <button class="qx">取消订单</button> -->
	</view>
	<view class="footer" v-if="detail.status == 2">
	  <button class="play" @click="comorder">确认收货</button>
	  <button class="qx">查看物流</button>
	</view>
	<view class="footer" v-if="detail.status == 3">
	  <!-- <button class="play" @click="payorder">立即支付</button>
	  <button class="qx">取消订单</button> -->
	</view>
  </view>
</template>
<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
		address_id:0,
		address: {
        name: "吴司机",
        phone: "123456789",
        location: "地址：北京市东城区五号楼大啊卡健身卡就",
      },
	  order_id:0,
	  detail:{},
	  timeData:{}
    };
  },
  onLoad(e) {
  	if(e.order_id){
		this.order_id = e.order_id
		this.getproview()
	}
	if(e.address_id){
		this.address_id = e.address_id
	}
  },
  methods: {
	  onChange(e) {
	                  this.timeData = e
	              },
	  cannel_order(){
		var that = this
		that.$.ajax(1,'POST','/user/cannel_order',{
			order_id:that.order_id,
		},(res)=>{
			// that.$.ti_shi(res.msg)
			if(res.code == 1){
				that.getproview()
				// setTimeout(()=>{
				// 	uni.navigateBack()
				// },1000)
				
			}
			
		})
	  },
	comorder(){
	  	var that = this
	  	that.$.ajax(1,'POST','/user/take_order',{
	  		order_id:this.order_id,
	  	},(res)=>{
	  		if(res.code == 1){
	  			that.$.ti_shi(res.msg)
	  			setTimeout(()=>{
	  				that.getproview()
	  			},1000)
	  			
	  		}
	  		
	  		
	  	})
	},
	payorder(){
		var that = this
		that.$.ajax(1,'POST','/user/confirmorder',{
			order_id:this.order_id,
			address_id:this.address_id,
			num:1
		},(res)=>{
			if(res.code == 1){
				that.$.ajax(1,'POST','/user/payorder',{
					order_id:that.order_id,
					paytype:1
				},(res)=>{
					uni.requestPayment({
						"provider": "wxpay", 
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: 'MD5',
						paySign: res.data.sign, 
						success(res) {
							console.log(res)
							that.getproview()
						},
						fail(e) {
							console.log(e)
						}
					})
					
				})
			}
			
		})
	},
	getproview(){
		var that = this
		that.$.ajax(1,'POST','/user/getorderdetail',{
			order_id:this.order_id
		},(res)=>{
			that.detail = res.data.detail
			// that.address_id = res.data.detail.address_id
		})
	},
    rightClick() {
      uni.navigateBack();
    },
    go(url) {
      uni.navigateTo({ url });
    },
    cancelOrder() {
      // 执行取消订单的操作
    },
    payOrder() {
      // 执行支付订单的操作
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.content {
  .header {
    background-color: #111630;
    padding: 60rpx 30rpx 110rpx;
    color: #ffffff;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 30rpx;
    text-align: left;
    border-radius: 0 0 30% 30%;
    padding-top: 50rpx;

    view {
      margin-bottom: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 50rpx;
      text-align: left;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;

    padding: 20rpx;
    background-color: #fff;
    flex-direction: row-reverse;
    gap: 20rpx;
    .play {
      width: 200rpx;
      height: 72rpx;
      padding: 8px 16px 8px 16px;
      gap: 12px;
      border-radius: 48px 0px 0px 0px;
      opacity: 0px;
      border-radius: 96rpx;
      line-height: 72rpx;
      background: linear-gradient(270deg, #003db1 0%, #0096ff 100%);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      text-align: center;
      margin: 0;
    }
    .qx {
      margin: 0;
      width: 200rpx;
      height: 72rpx;
      padding: 8px 16px 8px 16px;
      gap: 12px;
      border-radius: 48px 0px 0px 0px;
      opacity: 0px;
      border-radius: 96rpx;
      line-height: 72rpx;
      border: 1px solid #999999;
      // background: linear-gradient(270deg, #003db1 0%, #0096ff 100%);
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
    }
  }
  .body {
    padding: 15rpx;

    .order-info {
      padding: 20rpx;
      background-color: #fff;
      .tit {
        font-size: 28rpx;
        color: #393b3a;
        font-weight: 700;
      }
      .order-item {
        font-size: 22rpx;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 30rpx;
        color: #999999;
        text {
          color: #393b3a;
        }
      }
    }

    .box {
      padding: 20rpx;
      display: flex;
      margin: 20rpx 0;
      gap: 20rpx;
      background-color: #fff;

      img {
        flex-shrink: 0;
        width: 66px;
        height: 66px;
        border-radius: 4px;
      }

      .box-right {
        //display: flex;
        //flex-direction: column;
        flex: 1;

        .gg {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #999999;
          margin: 24rpx 0 6rpx 0;
          font-size: 22rpx;
          font-weight: 400;
        }

        .title {
          flex: 1;
          white-space: pre-wrap; /* 允许在单词内换行 */
          word-break: break-all; /* 允许在任意字符处换行 */
          font-weight: 700;
          font-size: 26rpx;
        }
      }
    }

    .address {
      margin-top: -90rpx;
      padding: 30rpx;
      border-radius: 8rpx;
      background-color: #fff;

      .location {
        font-family: Alibaba PuHuiTi 2;
        font-size: 24rpx;
        font-weight: 400;
        text-align: left;
        color: #999999;
      }

      .man {
        align-items: flex-end;
        gap: 20rpx;
        display: flex;
        font-family: Alibaba PuHuiTi 2;
        font-size: 28rpx;
        font-weight: 700;
        text-align: left;
        margin-bottom: 20rpx;
        .mans {
          display: flex;
          align-items: center;
          img {
            margin-right: 16rpx;
          }
        }
        .phone {
          font-weight: 400;
        }

        img {
          width: 34rpx;
          height: 34rpx;
        }
      }
    }
  }
}
</style>

